<template>

  <body class="Login">
    <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginFormRef" v-loading="loading">
      <h3 class="login-title">用户登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="输入密码" prefix-icon="el-icon-lock"></el-input>
      </el-form-item>
      <!-- <el-checkbox class="login-remember-me" v-model="loginForm.rememberMe">
        <span>7天内免登录</span>
      </el-checkbox> -->
      <el-form-item>
        <el-button type="info" style="width: 40%; background: #505458; border: none" @click="login">登陆</el-button>
        <el-button type="info" style="width: 40%; background: #505458; border: none" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </body>
</template>

<script>
import { formatRoutes } from "router/index";

export default {
  name: "Login",
  metaInfo: {
    title: "登录页",
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  methods: {
    async login() {
      // 判断表单是否填写完整
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
      });

      let param = new URLSearchParams();
      param.append("username", this.loginForm.username);
      param.append("password", this.loginForm.password);
      param.append("rememberMe", this.loginForm.rememberMe);

      // 发起登陆请求
      const { data: res } = await this.$http.post("login", param);
      if (res.code !== 200) return;

      // 保存token到localStorage
      window.localStorage.setItem("token", res.data.token);

      // 登陆后，保存后台菜单到store
      const { data: menuRes } = await this.$http.get("admin/menus");
      if (menuRes.code !== 200) {
        return this.$message.error(menuRes.msg);
      }
      this.$store.commit("getMenuList", menuRes.data);
      this.$router.$addRoutes(formatRoutes(this.$store.state.menuList));

      // 登陆后，保存 user 到store
      this.$store.commit("login", this.loginForm);

      // 登陆后跳转
      const redirectPath = this.$route.query.redirect;
      this.$router.replace({
        path: redirectPath === undefined ? "/index" : redirectPath,
      });

      this.$message.success("登陆成功");
    },

    // 注册
    register() {
      this.$router.push("/register");
    },
  },
};
</script>

<style lang="less" scoped>
.Login {
  height: 100%;
  width: 100%;
  background: url("~assets/img/bg.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  // 相对于body的固定定位
  position: fixed;
}
.login-form {
  background: #fff;
  border-radius: 15px;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login-title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.login-remember-me {
  margin: 0px 0px 35px 0px;
  text-align: left;
}
</style>
